<template>
  <div>
    <TableList
      ref="TableList"
      :model-value="searchFormData"
      request-url="system/company/list"
      request-method="get"
      :table-data="tableData"
      :table-column="tableColumn"
      :custom-request="true"
      @requestParams="requestList"
    >
      <!-- 搜索去内容 -->
      <template #search>
        <el-form-item label="门店名称" prop="keyword">
          <el-input v-model="searchFormData.keyword" autocomplete="off" placeholder="请输入门店名称" size="small" clearable />
        </el-form-item>
      </template>

      <!-- 按钮区 -->
      <template #btns>
        <el-button size="small" type="primary" @click="drawer=true">新增门店</el-button>
        <!-- <el-button size="small" type="primary" @click="drawer=true">创建门店账号</el-button> -->
      </template>

      <template #accountInfo="{ item, row }">
        <el-button size="mini" type="primary" @click="watchAccountInfo(row)">点击查看管理账号</el-button>
      </template>

      <!-- 图片 -->
      <template #companyImage="{ item, row }">
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            :src="row[item]"
            :preview-src-list="[row[item]]"
          />
        </div>
      </template>

      <!-- 自定义operate 列 -->
      <template #operate="{ item, row }">
        <el-button type="text" size="small" @click="handleUpdate(row)">编辑</el-button>
        <el-button type="text" size="small" @click="deleteStore(row)">删除</el-button>
        <el-button type="text" size="small" @click="createAccount(row)">创建账号</el-button>
      </template>

    </TableList>
    <Form
      :drawer="drawer"
      :default-value="defaultValue"
      :classify-list="classifyList"
      @add-success="addSuccess"
      @close:drawer="drawer=false"
    />
    <AccountInfo
      :id="companyId"
      :visible="accountShow"
      @close="accountShow = false"
    />
    <CreateAccount
      :id="companyId"
      :visible="createShow"
      @close="createShow = false"
      @add-success="createShow=false"
    />

  </div>
</template>

<script>
import TableList from '@/components/TableList'
import Form from './form'
import AccountInfo from './AccountInfo.vue'
import CreateAccount from './CreateAccount'
import { myMixin } from './data.js'
import { area } from '@/utils/area'
import request from '@/utils/request'

export default {
  components: {
    TableList,
    Form,
    AccountInfo,
    CreateAccount
  },
  mixins: [myMixin],
  data() {
    return {
      drawer: false,
      accountShow: false,
      createShow: false,
      searchFormData: {},
      defaultValue: {},
      companyId: 0,
      province: (() => area.map(item => ({ value: item.ad_name, label: item.ad_name })))(),
      city: (() => {
        return area.reduce((pre, cur) => {
          const children = cur.children.map(item => ({ value: item.name, label: item.name }))
          pre = pre.concat(children)
          return pre
        }, [])
      })(),

      tableData: [],
      classifyList: []
    }
  },
  created() {
    // this.getStoreList()
  },
  methods: {

    /** 获取门店列表 */
    getStoreList() {
      return new Promise((resolve, reject) => {
        request({ url: 'system/company/list', method: 'get', params: { pageSize: 10000, pageNum: 1 }}).then(res => {
          console.log(res)
          if (res.code === 200) {
            resolve(res.rows)
          } else {
            reject()
          }
        }).catch(reject)
      })
    },

    /** 获取部门列表 */
    async requestList() {
      const data = await this.getStoreList()
      console.log(data, '----')
    },

    addSuccess() {
      this.drawer = false
      this.$refs.TableList?.requestData()
    },
    async handleUpdate(row) {
      this.drawer = true
      console.log(row)
      this.defaultValue = row

      // const data = await request({ url: 'system/product/' + row.id, method: 'get' })
      // if (data.code == 200) {
      //   this.detailValue = data.data
      // }
      // console.log(data, '-000')
    },
    getClassifyList() {
      request({ url: 'system/category/list', method: 'get', params: { pageSize: 1000 }}).then(res => {
        if (res.code == 200) {
          this.classifyList = res.rows.map(item => ({ value: item.category, label: item.category }))
        }
      })
    },
    deleteStore(row) {
      request({ url: 'system/company/delete', method: 'post', data: { id: row.id }}).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 2000,
            onClose: () => {
              this.$refs.TableList?.requestData()
            }
          })
        }
      })
      //
    },
    watchAccountInfo(row) {
      this.companyId = row.id
      this.accountShow = true
    },
    createAccount(row) {
      this.companyId = row.id
      this.createShow = true
    }
  }

}
</script>
